<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navigate-title">
				<navigator url="/pages/index/index" open-type="switchTab" class="back-button">
					<view style="display: flex;">
						<u-icon color="#1e88e5" name="arrow-left"></u-icon>
						<text class="header-title">员工管理</text>
					</view>
				</navigator>
			</view>
			<view slot="right">
				<view class="filter-button" @click="toggleFilterPanel">
					<text class="fa fa-filter filter-icon"></text>
				</view>
				<view class="search-button" @click="toggleSearchBar"></view>
			</view>
		</u-navbar>

		<!-- 标签页 -->
		<view class="tab-container">
			<view class="tab-content">
				<view class="tab-item" :class="{'active-tab': activeTab === 'all', 'inactive-tab': activeTab !== 'all'}"
					@click="switchTab('all')">
					全部员工
				</view>
				<view class="tab-item"
					:class="{'active-tab': activeTab === 'fulltime', 'inactive-tab': activeTab !== 'fulltime'}"
					@click="switchTab('fulltime')">
					全职
				</view>
				<view class="tab-item"
					:class="{'active-tab': activeTab === 'parttime', 'inactive-tab': activeTab !== 'parttime'}"
					@click="switchTab('parttime')">
					兼职
				</view>
				<view class="tab-item"
					:class="{'active-tab': activeTab === 'intern', 'inactive-tab': activeTab !== 'intern'}"
					@click="switchTab('intern')">
					实习生
				</view>
			</view>
		</view>

		<!-- 搜索栏 (默认隐藏) -->
		<view class="search-container" :class="{'hidden': !showSearchBar}">
			<view class="search-input-wrapper">
				<input type="text" placeholder="搜索员工姓名/工号..." class="search-input" v-model="searchKeyword"
					@input="searchEmployees">
				<text class="search-icon fa fa-search"></text>
				<view class="close-search" @click="toggleSearchBar">
					<text class="fa fa-times"></text>
				</view>
			</view>
		</view>

		<!-- 筛选面板 (底部弹出) -->
		<view class="filter-panel-container" :class="{'hidden': !showFilterPanel}">
			<view class="filter-panel-content">
				<view class="filter-panel-header">
					<view class="filter-panel-title-wrapper">
						<text class="filter-panel-title">筛选条件</text>
						<view class="close-filter-panel" @click="toggleFilterPanel">
							<text class="fa fa-times"></text>
						</view>
					</view>
				</view>
				<view class="filter-panel-body">
					<!-- 员工类型筛选 -->
					<view class="filter-item">
						<text class="filter-label">员工类型</text>
						<u-picker :show="showEmployeeTypePicker" :list="employeeTypes" @confirm="onEmployeeTypeChange"
							@cancel="showEmployeeTypePicker = false"></u-picker>
						<view class="filter-value" @click="showEmployeeTypePicker = true">
							{{ selectedEmployeeType !== -1 ? employeeTypes[selectedEmployeeType].label : '全部' }}
							<u-icon name="arrow-right" size="16" class="filter-arrow"></u-icon>
						</view>
					</view>

					<!-- 部门筛选 -->
					<view class="filter-item">
						<text class="filter-label">部门</text>
						<u-picker :show="showDepartmentPicker" :list="departments" @confirm="onDepartmentChange"
							@cancel="showDepartmentPicker = false"></u-picker>
						<view class="filter-value" @click="showDepartmentPicker = true">
							{{ selectedDepartment !== -1 ? departments[selectedDepartment].label : '全部' }}
							<u-icon name="arrow-right" size="16" class="filter-arrow"></u-icon>
						</view>
					</view>

					<!-- 职位筛选 -->
					<view class="filter-item">
						<text class="filter-label">职位</text>
						<u-picker :show="showPositionPicker" :list="positions" @confirm="onPositionChange"
							@cancel="showPositionPicker = false"></u-picker>
						<view class="filter-value" @click="showPositionPicker = true">
							{{ selectedPosition !== -1 ? positions[selectedPosition].label : '全部' }}
							<u-icon name="arrow-right" size="16" class="filter-arrow"></u-icon>
						</view>
					</view>

					<!-- 入职日期筛选 -->
					<view class="filter-item">
						<text class="filter-label">入职日期</text>
						<view class="date-picker">
							<u-datetime-picker :show="showStartDatePicker" v-model="startDate" mode="date"
								@confirm="onStartDateChange" @cancel="showStartDatePicker = false"></u-datetime-picker>
							<view class="date-input" @click="showStartDatePicker = true">
								{{ startDate || '开始日期' }}
							</view>
						</view>
						<view class="date-separator">-</view>
						<view class="date-picker">
							<u-datetime-picker :show="showEndDatePicker" v-model="endDate" mode="date"
								@confirm="onEndDateChange" @cancel="showEndDatePicker = false"></u-datetime-picker>
							<view class="date-input" @click="showEndDatePicker = true">
								{{ endDate || '结束日期' }}
							</view>
						</view>
					</view>

					<!-- 筛选按钮 -->
					<view class="filter-buttons">
						<view class="reset-button" @click="resetFilters">重置</view>
						<view class="confirm-button" @click="applyFilters">确认</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="main-container">
			<!-- 员工概览 -->
			<view class="overview-container">
				<view class="overview-item">
					<text class="overview-label">员工总数</text>
					<view class="overview-value-wrapper">
						<text class="overview-value">{{ totalEmployees }}</text>
						<text class="overview-change">
							<text class="fa fa-arrow-up change-icon"></text>8.3%
						</text>
					</view>
				</view>
				<view class="overview-item">
					<text class="overview-label">本月新增</text>
					<view class="overview-value-wrapper">
						<text class="overview-value">{{ newEmployeesThisMonth }}</text>
						<text class="overview-change">
							<text class="fa fa-arrow-up change-icon"></text>2.1%
						</text>
					</view>
				</view>
				<view class="overview-item">
					<text class="overview-label">本月离职</text>
					<view class="overview-value-wrapper">
						<text class="overview-value">{{ resignedEmployeesThisMonth }}</text>
						<text class="overview-change">
							<text class="fa fa-minus change-icon"></text>0.0%
						</text>
					</view>
				</view>
			</view>

			<!-- 快捷操作 -->
			<!-- <view class="quick-actions">
				<navigator url="/pageNew/pages/employee/add-employee/index" class="quick-action-item">
					<view class="quick-action-icon">
						<u-icon color="#1e88e5" name="plus-circle"></u-icon>
					</view>
					<text class="quick-action-text">添加员工</text>
				</navigator>
				<view class="quick-action-item" @click="showImportModal">
					<view class="quick-action-icon">
						<u-icon color="#1e88e5" name="man-add"></u-icon>
					</view>
					<text class="quick-action-text">导入员工</text>
				</view>
				<view class="quick-action-item" @click="showExportModal">
					<view class="quick-action-icon">
						<u-icon color="#00aa7f" name="attach"></u-icon>
					</view>
					<text class="quick-action-text">导出员工</text>
				</view>
				<view class="quick-action-item" @click="showStatisticsModal">
					<view class="quick-action-icon">
						<u-icon color="#1e88e5" name="calendar-fill"></u-icon>
					</view>
					<text class="quick-action-text">员工统计</text>
				</view>
			</view> -->

			<!-- 员工列表 -->
			<view class="employee-list" v-if="employeeList.length > 0">
				<view class="employee-card" v-for="(employee, index) in employeeList" :key="index">
					<view class="meta-item">
						<text class="meta-label">工号:</text>
						<text class="meta-value">{{ employee.employeeNo }}</text>
					</view>
					<view class="employee-header">
						<view class="employee-info">
							<view class="employee-avatar">
								<text class="avatar-text">{{ employee.name.charAt(0) }}</text>
							</view>
							<view class="employee-details">
								<text class="employee-name">{{ employee.name }}</text>
								<view class="employee-position">
									{{ getDepartmentName(employee.department) }} | {{ employee.position }}
								</view>
							</view>
						</view>
						<view class="employee-type" :class="getEmployeeTypeClass[index]">
							{{ getEmployeeTypeText(employee.employeeType) }}
						</view>
					</view>
					<view class="employee-meta">

						<view class="meta-item">
							<text class="meta-label">入职:</text>
							<text class="meta-value">{{ formatDate(employee.hireDate) }}</text>
						</view>
						<view class="meta-item">
							<text class="meta-label">性别:</text>
							<text class="meta-value">{{ employee.gender }}</text>
						</view>
					</view>
					<view class="employee-actions">
						<navigator :url="'/pageNew/pages/employee/view-employee/index?id=' + employee.id"
							class="action-button">
							查看
						</navigator>
						<navigator :url="'/pageNew/pages/employee/edit-employee/index?id=' + employee.id"
							class="action-button">
							编辑
						</navigator>
						<navigator :url="'/pageNew/pages/employee/salary-employee/index?id=' + employee.id"
							class="action-button">
							薪资
						</navigator>
						<view class="delete-button" @click="deleteEmployee(employee.id)">删除</view>
					</view>
				</view>
			</view>

			<!-- 无数据提示 -->
			<view class="empty-state" v-if="employeeList.length === 0 && !isLoading">
				<view class="empty-icon">
					<text class="fa fa-users empty-icon-text"></text>
				</view>
				<text class="empty-title">暂无员工记录</text>
				<text class="empty-message">点击下方按钮添加第一位员工</text>
			</view>

			<!-- 上拉加载提示 (与门禁页面保持一致) -->
			<view v-if="isLoading && employeeList.length > 0" class="loading-state">
				<u-loading-icon :text="loadingText" color="#1e88e5"></u-loading-icon>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer-container">
			<view class="footer-content">
				<view class="footer-left">
					<text class="footer-text">总计: </text>
					<text class="footer-count">{{ totalEmployees }}</text>
					<text class="footer-text"> 位员工</text>
				</view>
				<!-- <navigator url="/pageNew/pages/employee/add-employee" class="add-employee-button">
					<text class="fa fa-plus button-icon"></text>添加员工
				</navigator> -->
				<navigator url="/pageNew/pages/employee/add-employee/index" class="add-employee-button">
					<!-- <view class="quick-action-icon">
						<u-icon color="#1e88e5" name="plus-circle"></u-icon>
					</view> -->
					<text class="quick-action-text">添加员工</text>
				</navigator>
			</view>
		</view>

		<!-- 筛选器所需的picker弹窗 -->
		<u-picker :show="showEmployeeTypePicker" :list="employeeTypes" @confirm="onEmployeeTypeChange"
			@cancel="showEmployeeTypePicker = false"></u-picker>
		<u-picker :show="showDepartmentPicker" :list="departments" @confirm="onDepartmentChange"
			@cancel="showDepartmentPicker = false"></u-picker>
		<u-picker :show="showPositionPicker" :list="positions" @confirm="onPositionChange"
			@cancel="showPositionPicker = false"></u-picker>
		<u-datetime-picker :show="showStartDatePicker" v-model="startDate" mode="date" @confirm="onStartDateChange"
			@cancel="showStartDatePicker = false"></u-datetime-picker>
		<u-datetime-picker :show="showEndDatePicker" v-model="endDate" mode="date" @confirm="onEndDateChange"
			@cancel="showEndDatePicker = false"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getEmployeeListApi,
		deleteEmployeeApi
	} from "@/api/employee.js";

	export default {
		data() {
			return {
				activeTab: 'all',
				showSearchBar: false,
				searchKeyword: '',
				showFilterPanel: false,

				// 分页和数据相关
				employeeList: [],
				pageNumber: 1,
				pageSize: 10,
				total: 0,
				isLoading: false,
				loadingText: '加载中...',

				// 筛选相关（与API参数对应）
				employeeTypes: [{
						value: '1',
						label: '实习生'
					},
					{
						value: '2',
						label: '全职'
					},
					{
						value: '3',
						label: '兼职'
					}
				],
				selectedEmployeeType: -1,
				departments: [{
						value: '10',
						label: '技术部'
					},
					{
						value: '20',
						label: '人力资源部'
					},
					{
						value: '30',
						label: '销售部'
					},
					{
						value: '40',
						label: '财务部'
					},
					{
						value: '50',
						label: '运营部'
					}
				],
				selectedDepartment: -1,
				positions: [{
						value: 'frontend',
						label: '前端工程师'
					},
					{
						value: 'backend',
						label: '后端工程师'
					},
					{
						value: 'hr',
						label: 'HR专员'
					},
					{
						value: 'sales',
						label: '销售代表'
					},
					{
						value: 'intern',
						label: '实习生'
					},
					{
						value: 'test',
						label: '测试'
					}
				],
				selectedPosition: -1,
				startDate: '',
				endDate: '',

				// 筛选弹窗控制
				showEmployeeTypePicker: false,
				showDepartmentPicker: false,
				showPositionPicker: false,
				showStartDatePicker: false,
				showEndDatePicker: false,

				// 统计数据
				totalEmployees: 0,
				newEmployeesThisMonth: 1,
				resignedEmployeesThisMonth: 0,

				// 部门字典（用于ID转名称）
				departmentDict: {
					'10': '技术部',
					'20': '人力资源部',
					'30': '销售部',
					'40': '财务部',
					'50': '运营部',
					// 可根据实际业务扩展更多部门ID和名称
				}
			};
		},
		computed: {
			// 判断是否还有更多数据
			hasMore() {
				return this.employeeList.length < this.total;
			},
			employeeTypeClasses() {
				return this.employeeList.map(emp => this.getEmployeeTypeClass(emp.type));
			}
		},
		onLoad() {
			// 页面加载时获取第一页数据
			this.fetchEmployeeList(true);
		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {
			console.log("上拉加载了");
			// 如果还有更多数据且当前没有在加载中，则加载下一页
			if (this.hasMore && !this.isLoading) {
				this.fetchEmployeeList(false);
			}
		},
		methods: {
			/**
			 * 统一获取员工列表数据
			 * @param {boolean} isRefresh - 是否为刷新操作（true会清空现有列表并重置页码）
			 */
			async fetchEmployeeList(isRefresh = false) {
				if (this.isLoading) return; // 防止重复请求

				this.isLoading = true;
				if (isRefresh) {
					this.pageNumber = 1;
					this.employeeList = []; // 刷新时清空列表
				}

				try {
					// 构建请求参数
					const submitData = this.getQueryParams();
					console.log('请求参数:', submitData);

					// 转换为GET请求所需的查询字符串格式
					const queryString = this.objToQueryString(submitData);
					// 调用真实的API接口（GET方式，参数拼接在URL后）
					const res = await getEmployeeListApi(queryString);

					if (res.code === 200 && res.data) {
						// API返回的员工列表在 data.data 中
						const {
							data: employeeData,
							total
						} = res.data;
						this.total = total;
						this.totalEmployees = total; // 更新员工总数

						// 追加新数据
						this.employeeList = [...this.employeeList, ...employeeData];

						// 如果没有更多数据了，更新加载提示
						if (!this.hasMore) {
							this.loadingText = '暂无更多数据';
						} else {
							this.loadingText = '加载中...';
						}
					} else {
						uni.showToast({
							title: res.msg || '获取员工列表失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error("获取员工列表异常:", error);
					uni.showToast({
						title: '网络请求异常',
						icon: 'none'
					});
				} finally {
					this.isLoading = false; // 请求结束，恢复加载状态
				}
			},

			/**
			 * 辅助函数：将对象转换为 URL 查询字符串（适配GET请求）
			 */
			objToQueryString(obj) {
				return Object.keys(obj)
					.filter(key => obj[key] !== '' && obj[key] !== undefined && obj[key] !== null)
					.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
					.join('&');
			},

			/**
			 * 构建请求参数（与API接口参数对应）
			 */
			getQueryParams() {
				// 标签页类型映射：all→空，fulltime→2，parttime→3，intern→1
				const tabTypeMap = {
					'all': '',
					'fulltime': '2',
					'parttime': '3',
					'intern': '1'
				};

				return {
					companyId: uni.getStorageSync('companyId') || '', // 从缓存获取公司ID
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					// 员工类型：标签页优先级高于筛选面板
					employeeType: this.activeTab !== 'all' ? tabTypeMap[this.activeTab] : (this.selectedEmployeeType !== -
						1 ? this.employeeTypes[this.selectedEmployeeType].value : ''),
					keyword: this.searchKeyword,
					department: this.selectedDepartment !== -1 ? this.departments[this.selectedDepartment].value : '',
					position: this.selectedPosition !== -1 ? this.positions[this.selectedPosition].label : '',
					startDate: this.startDate,
					endDate: this.endDate
				};
			},

			/**
			 * 切换标签页
			 */
			switchTab(tab) {
				this.activeTab = tab;
				this.fetchEmployeeList(true); // 切换标签后刷新数据
			},

			/**
			 * 搜索员工（姓名/工号）
			 */
			searchEmployees() {
				this.fetchEmployeeList(true);
			},

			/**
			 * 应用筛选条件
			 */
			applyFilters() {
				this.toggleFilterPanel();
				this.fetchEmployeeList(true);
			},

			/**
			 * 重置筛选条件
			 */
			resetFilters() {
				this.selectedEmployeeType = -1;
				this.selectedDepartment = -1;
				this.selectedPosition = -1;
				this.startDate = '';
				this.endDate = '';
				this.searchKeyword = '';
				this.fetchEmployeeList(true);
			},

			/**
			 * 根据部门ID获取部门名称
			 */
			getDepartmentName(deptId) {
				return this.departmentDict[deptId] || `部门${deptId}`;
			},

			/**
			 * 获取员工类型样式
			 */
			getEmployeeTypeClass(type) {
				switch (type) {
					case '2': // 全职
						return 'bg-secondary bg-opacity-10 text-secondary text-xs font-medium';
					case '3': // 兼职
						return 'bg-warning bg-opacity-10 text-warning text-xs font-medium';
					case '1': // 实习生
						return 'bg-primary bg-opacity-10 text-primary text-xs font-medium';
					default:
						return '';
				}
			},

			/**
			 * 获取员工类型文本
			 */
			getEmployeeTypeText(type) {
				switch (type) {
					case '2':
						return '全职';
					case '3':
						return '兼职';
					case '1':
						return '实习生';
					default:
						return '未知';
				}
			},

			/**
			 * 格式化日期（去除时分秒，只保留年月日）
			 */
			formatDate(dateStr) {
				if (!dateStr) return '';
				return dateStr.split(' ')[0];
			},

			/**
			 * 删除员工
			 */
			deleteEmployee(id) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除此员工吗？删除后数据不可恢复',
					success: (res) => {
						if (res.confirm) {
							deleteEmployeeApi(id).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: '员工删除成功',
										icon: 'success'
									});
									// 重新获取列表数据
									this.fetchEmployeeList(true);
								} else {
									uni.showToast({
										title: res.msg || '删除失败',
										icon: 'none'
									});
								}
							}).catch(err => {
								console.error('删除员工异常:', err);
								uni.showToast({
									title: '网络请求异常',
									icon: 'none'
								});
							});
						}
					}
				});
			},

			/**
			 * 显示导入员工弹窗
			 */
			showImportModal() {
				uni.showModal({
					title: '导入员工',
					content: '请选择导入方式',
					cancelText: 'Excel导入',
					confirmText: '手动输入',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pageNew/pages/employee/add-employee'
							});
						} else if (res.cancel) {
							// Excel导入逻辑（可根据实际接口扩展）
							uni.chooseMessageFile({
								count: 1,
								type: 'file',
								extension: ['.xlsx', '.xls'],
								success: (res) => {
									const tempFilePath = res.tempFiles[0].path;
									console.log('选择的Excel文件:', tempFilePath);
									// 调用Excel导入接口
									// importEmployeeApi(tempFilePath).then(res => { ... });
									uni.showToast({
										title: '导入成功',
										icon: 'success'
									});
									this.fetchEmployeeList(true);
								}
							});
						}
					}
				});
			},

			/**
			 * 显示导出员工弹窗
			 */
			showExportModal() {
				uni.showActionSheet({
					itemList: ['导出为Excel', '导出为PDF', '导出为CSV'],
					success: (res) => {
						const exportType = ['excel', 'pdf', 'csv'][res.tapIndex];
						// 构建导出参数（与列表筛选条件一致）
						const exportParams = this.getQueryParams();
						// 调用导出接口
						// exportEmployeeApi({ ...exportParams, exportType }).then(res => {
						// 	if (res.code === 200) {
						// 		// 下载文件
						// 		uni.downloadFile({ url: res.data.downloadUrl });
						// 	}
						// });
						uni.showToast({
							title: `已开始导出${exportType.toUpperCase()}文件`,
							icon: 'success'
						});
					}
				});
			},

			/**
			 * 显示员工统计弹窗
			 */
			showStatisticsModal() {
				uni.navigateTo({
					url: '/pageNew/pages/employee/statistics/index'
				});
			},

			// 切换搜索栏显示/隐藏
			toggleSearchBar() {
				this.showSearchBar = !this.showSearchBar;
				if (!this.showSearchBar) {
					this.searchKeyword = '';
					this.fetchEmployeeList(true);
				}
			},

			// 切换筛选面板显示/隐藏
			toggleFilterPanel() {
				this.showFilterPanel = !this.showFilterPanel;
			},

			// 员工类型选择变化
			onEmployeeTypeChange(e) {
				this.selectedEmployeeType = e.detail.index;
				this.showEmployeeTypePicker = false;
			},

			// 部门选择变化
			onDepartmentChange(e) {
				this.selectedDepartment = e.detail.index;
				this.showDepartmentPicker = false;
			},

			// 职位选择变化
			onPositionChange(e) {
				this.selectedPosition = e.detail.index;
				this.showPositionPicker = false;
			},

			// 开始日期选择变化
			onStartDateChange(e) {
				this.startDate = e.detail.value;
				this.showStartDatePicker = false;
			},

			// 结束日期选择变化
			onEndDateChange(e) {
				this.endDate = e.detail.value;
				this.showEndDatePicker = false;
			}
		}
	};
</script>
<style>
	/* 你的样式文件内容保持不变 */
	/* 为了简洁，这里省略了完整的样式，你可以直接使用你原来的样式 */
	/* 请确保 .main-container 有足够的内边距，特别是底部，以防止列表被底部操作栏遮挡 */
	.main-container {
		max-width: 100vw;
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 120rpx;
		/* 增加底部内边距，确保加载提示可见 */
	}

	/* 加载状态样式 */
	.loading-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0;
	}
</style>
<style>
	@import "@/common/style.css";

	/* 基础样式 */
	.page-container {
		background-color: #f9fafb;
		min-height: 100vh;
	}

	/* 头部样式 */
	.header-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
		z-index: 10;
	}

	.header-content {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		padding: 12px 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.back-button {
		margin-right: 12px;
		color: #6b7280;
	}

	.header-title {
		font-size: 20px;
		font-weight: 600;
		color: #1E88E5;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.filter-button {
		color: #6b7280;
	}

	.filter-icon {
		font-size: 18px;
	}

	.search-button {
		color: #6b7280;
	}

	/* 标签页样式 */
	.tab-container {
		position: relative;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
		z-index: 10;
		/* margin-top: 50px; */
	}

	.tab-content {
		width: 100%;
		max-width: 750rpx;
		margin: 0 auto;
		display: flex;
	}

	.tab-item {
		flex: 1;
		padding: 12px 16px;
		font-size: 14px;
	}

	.active-tab {
		color: #1E88E5;
		border-bottom: 2px solid #1E88E5;
		font-weight: 500;
	}

	.inactive-tab {
		color: #6b7280;
	}

	/* 搜索栏样式 */
	.search-container {
		position: fixed;
		top: 112px;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-bottom: 1px solid #e5e7eb;
		padding: 8px 16px;
		z-index: 10;
	}

	.search-input-wrapper {
		position: relative;
	}

	.search-input {
		width: 100%;
		padding-left: 40px;
		padding-right: 16px;
		padding-top: 8px;
		padding-bottom: 8px;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		font-size: 14px;
	}

	.search-icon {
		position: absolute;
		left: 12px;
		top: 12px;
		color: #9ca3af;
	}

	.close-search {
		position: absolute;
		right: 12px;
		top: 8px;
		color: #9ca3af;
	}

	/* 筛选面板样式 */
	.filter-panel-container {
		position: fixed;
		inset: 0;
		background-color: rgba(107, 114, 128, 0.5);
		z-index: 20;
	}

	.filter-panel-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		height: 60%;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		overflow-y: auto;
	}

	.filter-panel-header {
		padding: 16px;
		border-bottom: 1px solid #e5e7eb;
	}

	.filter-panel-title-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.filter-panel-title {
		font-size: 16px;
		font-weight: 500;
	}

	.close-filter-panel {
		color: #6b7280;
	}

	.filter-panel-body {
		padding: 16px;
	}

	/* 主内容区样式 */
	.main-container {
		max-width: 100vw;
		margin: 0 auto;
		padding: 16px;
		padding-bottom: 96px;
		margin-top: 10rpx;
	}

	/* 概览卡片样式 */
	.overview-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		margin-bottom: 40rpx;
	}

	.overview-item {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 12px;
	}

	.overview-label {
		font-size: 12px;
		color: #6b7280;
		margin-bottom: 4px;
		display: block;
	}

	.overview-value-wrapper {
		display: flex;
		align-items: flex-end;
	}

	.overview-value {
		font-size: 20px;
		font-weight: 600;
	}

	.overview-change {
		font-size: 12px;
		margin-left: 8px;
		display: flex;
		align-items: center;
	}

	.change-icon {
		margin-right: 4px;
	}

	/* 快捷操作样式 */
	.quick-actions {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px;
		margin-bottom: 16px;
	}

	.quick-action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 12px;
	}

	.quick-action-icon {
		width: 40px;
		height: 40px;
		border-radius: 9999px;
		background-color: #E3F2FD;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1E88E5;
		margin-bottom: 8px;
	}

	.quick-action-text {
		font-size: 12px;
	}

	/* 员工列表样式 */
	.employee-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.employee-card {
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		padding: 12px;
	}

	.employee-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.employee-info {
		display: flex;
		align-items: center;
	}

	.employee-avatar {
		width: 48px;
		height: 48px;
		border-radius: 9999px;
		background-color: #E3F2FD;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #1E88E5;
		margin-right: 12px;
	}

	.avatar-text {
		font-size: 18px;
		font-weight: 500;
	}

	.employee-details {
		display: flex;
		flex-direction: column;
	}

	.employee-name {
		font-size: 14px;
		font-weight: 500;
	}

	.employee-position {
		font-size: 12px;
		color: #6b7280;
	}

	.employee-type {
		border-radius: 10px;
		padding: 4px 8px;
		color: #7f7f7f;
		width: 100rpx;
		text-align: center;
	}

	/* 员工元数据样式 */
	.employee-meta {
		display: flex;
		justify-content: space-between;
		/* grid-template-columns: repeat(3, 1fr); */
		column-gap: 16px;
		row-gap: 4px;
		margin-top: 12px;
		font-size: 12px;
	}

	.meta-item {
		display: flex;
	}

	.meta-label {
		color: #6b7280;
	}

	.meta-value {
		margin-left: 4px;
	}

	/* 员工操作样式 */
	.employee-actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 12px;
	}

	.action-button {
		font-size: 12px;
		color: #1E88E5;
	}

	.delete-button {
		font-size: 12px;
		color: #F44336;
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 48px 0;
	}

	.empty-icon {
		width: 64px;
		height: 64px;
		border-radius: 9999px;
		background-color: #f3f4f6;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
	}

	.empty-icon-text {
		color: #9ca3af;
		font-size: 24px;
	}

	.empty-title {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 4px;
	}

	.empty-message {
		font-size: 14px;
		color: #6b7280;
		margin-bottom: 24px;
		text-align: center;
	}

	/* 底部样式 */
	.footer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1px solid #e5e7eb;
		padding: 12px 16px;
		z-index: 10;
	}

	.footer-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.footer-left {
		display: flex;
		align-items: center;
	}

	.footer-text {
		font-size: 12px;
		color: #6b7280;
	}

	.footer-count {
		font-size: 12px;
		font-weight: 500;
		color: #1E88E5;
	}

	.add-employee-button {
		padding: 8px 16px;
		background-color: #1E88E5;
		color: #ffffff;
		border-radius: 8px;
		font-size: 14px;
		display: flex;
		align-items: center;
	}

	.button-icon {
		margin-right: 8px;
	}

	/* 通用样式 */
	.hidden {
		display: none;
	}
</style>